import conversion_send_icon from '@/assets/image/conversion_send.png';
import { search_statistics } from '@/services/ant-design-pro/brainSpace';
import {
  articleRecommend,
  feedback_reasons,
  helpChat,
  search_feedback,
} from '@/services/ant-design-pro/conversation';
import { isNotEmpty } from '@/utils';
import { replaceN } from '@/utils/index';
import { CloseCircleOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
import { Button, Input, message, Select } from 'antd';
import { nanoid } from 'nanoid';
import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'umi';
import ArticleSource from './ArticleSource.js';
import MiniModelArticle from './MiniModelArticle';

const InputMode: React.FC<any> = (props) => {
  const InputModeMainRef = useRef<any>(null);
  const [userIpt, setUserIpt] = useState<any>('');
  const [aiChatList, setAiChatList] = useState<any[]>([]);
  const [selectList, setSelectList] = useState<any[]>([]);
  const [curSelect, setCurSelect] = useState<string>('');
  const [iptPlaceholder, setIptPlaceholder] = useState<string>('您可以问我大脑空间里的相关知识');
  const [feedbackReasons, setFeedbackReasons] = useState<any[]>([]); //点踩反馈文案列表
  const [curInputMode, setCurInputMode] = useState<string>('input'); //当前输入模式是否是点赞点踩
  const [curZanCai, setCurZanCai] = useState<any>({}); //当前赞踩反馈的内容
  const { showBottomSelect, curTab, goodSentenceTab } = props.spaceBot;
  const { cognitionTypes } = props.spaceModel;
  //公共更新model的方法
  const updateState = (updateObj: any) => {
    props.dispatch({
      type: 'spaceBot/updateStateAsync',
      payload: updateObj,
    });
  };

  //空间下拉change
  const changeSelect = (val: any) => {
    setCurSelect(val);
  };

  useEffect(() => {
    if (props.router === 'spaceData') {
      if (cognitionTypes && cognitionTypes.length > 0 && curTab) {
        setAiChatList(() => []);
        //部门空间
        let departmentObj = {
          id: 99,
          name: 'department',
          name_cn: '部门知识',
          second_class_list: [],
          frontend_mete_data: {
            input: [],
            can_delete: true,
            description:
              '本空间为专属定制化空间，收录了行政局本地知识，以提升您的搜索体验。旨在更精准地满足您的个性化需求。',
            title: '部门知识空间空间',
            describe: '部门知识空间',
          },
          count: 91,
        };
        //从cognitionTypes中 根据curTab 筛选出selectList = 全部空间+当前tab
        let curTabObj = cognitionTypes.find((item: any) => item.name === curTab) || departmentObj;
        setSelectList([
          { id: 99, value: 'all', label: '全部空间' },
          { id: curTabObj.id, value: curTabObj.name, label: curTabObj.name_cn + '空间' },
        ]);
        if (curSelect !== 'all') {
          changeSelect(curTab);
        }
        //生成初始的欢迎文案
        let welcomeCopyWriting = {
          key: nanoid(),
          type: 'systemCopy',
          data: `<div class="modeListBox"><div class="modeList">${curTabObj?.frontend_mete_data?.description}</div></div>`,
        };
        if (curTab === 'department') {
          welcomeCopyWriting = {
            key: nanoid(),
            type: 'systemCopy',
            data: `<div class="modeListBox"><div class="modeList"> <div style="font-size:20px;margin:10px 0 15px">这里是部门知识空间</div> ${curTabObj?.frontend_mete_data?.description}</div></div>`,
          };
          setIptPlaceholder('输入关键字，即可快速查询资料');
        }
        //清空之前的对话内容
        setAiChatList(() => [welcomeCopyWriting]);
        //判断是否可以添加训练按钮

        //删除trainingBtn
        setAiChatList((prev: any) => {
          return prev.filter((item: any) => {
            return item.type !== 'trainingBtn';
          });
        });
        let TrainingName = ['fact', 'collection', 'good_article'];
        if (TrainingName?.indexOf(curTabObj?.name) >= 0) {
          // 训练按钮
          let trainingBtn = {
            type: 'trainingBtn',
            data: `快去训练${curTabObj?.frontend_mete_data?.title}吧`,
          };
          setAiChatList((prev) => [...prev, trainingBtn]);
        }
      }
    }
  }, [cognitionTypes, curTab]);
  useEffect(() => {
    if (cognitionTypes && cognitionTypes.length > 0) {
      let curTabObj = cognitionTypes?.find((item: any) => item.name === curTab);
      let isHas = aiChatList.find((item: any) => item.type === 'trainingBtn');
      if (
        curTabObj?.name === 'good_sentence' &&
        goodSentenceTab &&
        goodSentenceTab === 'MY_TRAIN' &&
        !isHas
      ) {
        //好词好句单独判断
        let trainingBtn = {
          type: 'trainingBtn',
          data: `快去训练${curTabObj?.frontend_mete_data?.title}吧`,
        };
        //追加在第一条数据后面
        setAiChatList((prev) => {
          const newArr = [...prev]; // 创建一个新的数组副本
          newArr.splice(1, 0, trainingBtn); // 在数组的第二个位置插入 trainingBtn
          return newArr;
        });
      } else if (curTabObj?.name === 'good_sentence' && goodSentenceTab !== 'MY_TRAIN') {
        //如果是好词好句的其他二级tab 不显示训练按钮
        //删除trainingBtn
        setAiChatList((prev) => prev.filter((log) => log.type !== 'trainingBtn'));
      }
    }
  }, [curTab, goodSentenceTab, cognitionTypes]);

  //滑动到底部
  const scrollToBottom = (targetClassName = '', speed = 30) => {
    if (InputModeMainRef && InputModeMainRef.current) {
      const element = InputModeMainRef.current;
      let targetPosition = element.scrollHeight;

      if (targetClassName) {
        const targetElement: any = element.querySelector(targetClassName);

        if (targetElement) {
          targetPosition = targetElement?.offsetTop - targetElement?.offsetHeight; // 考虑到滚动到元素顶部
        } else {
          console.error(`找不到 '${targetClassName}'`);
          return; // 如果找不到元素，直接返回，不执行滚动操作
        }
      }
      const startPosition = element.scrollTop;
      const duration = (Math.abs(targetPosition - startPosition) / speed) * 10;
      const startTime = performance.now();
      const animation = (currentTime: any) => {
        const elapsedTime = currentTime - startTime;
        const currentPosition =
          startPosition + ((targetPosition - startPosition) / duration) * elapsedTime;
        element.scrollTop = currentPosition;

        if (elapsedTime < duration) {
          requestAnimationFrame(animation);
        }
      };

      requestAnimationFrame(animation);
    }
  };
  useEffect(() => {
    if (props.router === 'spaceHome') {
      //AI大脑入口页面 添加欢迎文案
      let systemCopy = {
        key: nanoid(),
        type: 'systemCopy',
        data:
          '<div class="modeListBox"><div class="modeList">' +
          '<div class="modeListTitle">欢迎来到小麦的大脑空间</div>' +
          '<p>这里拥有无限扩展的知识库，能够动态地学习、记忆您提供的所有的知识，为您的写作提供最强辅助。</p>' +
          '<p>可以根据您的需求不断学习，不断成长，成为您最省心、最好用的写作实习生。</p>' +
          '<p>简而言之，这里是小麦的知识源泉。小麦因为您的教导（提供更多知识）和使用（做出更多反馈），越来越聪明，越来越懂得为您提供最优质的服务。</p>' +
          '</div></div>',
      };
      setAiChatList([systemCopy]);

      setTimeout(() => {
        let systemCopy2 = {
          key: nanoid(),
          type: 'systemCopy',
          data: '<div class="modeListBox"><div class="modeList autoWidth">小麦会陪伴您的写作旅程，陪伴越久，小麦越了解您</div></div>',
        };
        setAiChatList((prev) => [...prev, systemCopy2]);
      }, 1000);
    } else if (props.router === 'spaceData') {
    }
  }, [props.router]);

  //大脑入口页面的提交
  const submitSpaceHome = async () => {
    //判断是否有输入
    if (!isNotEmpty(userIpt)) {
      message.open({
        type: 'info',
        content: '请输入你的指令',
      });
      return;
    }
    let userInput = {
      type: 'userCommand',
      data: `<div class="modeListBox userIptBox"><div class="modeList">${userIpt}</div></div> `,
    };
    setAiChatList((prev) => [...prev, userInput]);
    setUserIpt('');
    let robotLoad = {
      key: nanoid(),
      type: 'queryLoad',
      data: null,
    };
    setAiChatList((prev) => [...prev, robotLoad]);
    let body = {
      query: userIpt,
    };
    let res = await search_statistics(body);
    if (res.code === 0) {
      //删除queryLoad
      setAiChatList((prev) => prev.filter((log) => log.type !== 'queryLoad'));
      let hitResult = {
        type: 'hitResults',
        data: {
          query: userIpt,
          ...res.data,
        },
      };

      setAiChatList((prev) => [...prev, hitResult]);
      scrollToBottom();
    } else {
      //删除queryLoad
      setAiChatList((prev) => prev.filter((log) => log.type !== 'queryLoad'));
      message.open({
        type: 'error',
        content: res.msg,
      });
    }
  };
  //大脑页面的右侧对话框提交
  const submitSpaceData = async () => {
    //判断是否有输入
    if (!isNotEmpty(userIpt)) {
      message.open({
        type: 'info',
        content: '请输入你的指令',
      });
      return;
    }
    let userInput = {
      key: nanoid(),
      type: 'userCommand',
      data: `<div class="modeListBox userIptBox"><div class="modeList">${userIpt}</div></div> `,
    };
    setAiChatList((prev) => [...prev, userInput]);
    setUserIpt('');
    let robotLoad = {
      type: 'queryLoad',
      data: null,
    };
    setAiChatList((prev) => [...prev, robotLoad]);
    let body = {
      query: userIpt,
      cognition_type: curTab,
    };
    let res = await helpChat(body);
    if (res.code === 0) {
      //删除queryLoad
      setAiChatList((prev) => prev.filter((log) => log.type !== 'queryLoad'));
      if (res?.data?.cognitions?.length > 0 || res?.data?.content?.length > 0) {
        let hitResult = {
          key: nanoid(),
          type: 'hitResults',
          data: {
            query: userIpt,
            ...res.data,
          },
        };
        setAiChatList((prev) => [...prev, hitResult]);
        scrollToBottom();
      }
      //展示小模型的数据 articles
      if (res.data.articles && res.data.articles.length > 0) {
        const articlesWithKeyword = res.data.articles.map((article: any) => ({
          ...article,
          query: userIpt, //query 用于查询相关搜索的值
          keyword: userIpt, //获取小模型时的原始输入值 相关搜索时传ids 需要用keyword来匹配确定是否是同一组的id
        }));
        let miniModelArticle = {
          key: nanoid(),
          type: 'miniModelArticle',
          isTypewriter: true,
          data: articlesWithKeyword,
        };
        setAiChatList((prev: any) => [...prev, miniModelArticle]);
        //小于5条表示后面没有数据了
        if (res.data.articles.length <= 4) {
          setTimeout(() => {
            let systemCopy2 = {
              key: nanoid(),
              type: 'systemCopy',
              data: `<div class="modeListBox"><div class="modeList marR90">非常抱歉，没有更多结果可供显示，请尝试使用其他关键词。</div></div>`,
            };
            setAiChatList((prev) => [...prev, systemCopy2]);
            scrollToBottom();
          }, 1000 + 800 * res?.data?.articles.length);
        } else {
          setTimeout(() => {
            let lookRecommend = {
              key: nanoid(),
              type: 'lookRecommend',
              data: {
                ...articlesWithKeyword[0],
                keyword: userIpt,
                query: userIpt,
              },
            };
            setAiChatList((prev) => [...prev, lookRecommend]);
          }, 1000 + 800 * res?.data?.articles.length);
        }
      }
    } else {
      //删除queryLoad
      setAiChatList((prev) => prev.filter((log) => log.type !== 'queryLoad'));
      message.open({
        type: 'error',
        content: res.msg,
      });
    }
  };
  //提交用户输入
  const userIptSubmit = () => {
    //如果处于点赞点踩的模式 直接调用点赞点踩的接口 不调用其他接口
    if (curInputMode === 'zancai') {
      //小模型 点踩的反馈
      // eslint-disable-next-line @typescript-eslint/no-use-before-define
      submitFeedbackCai({ data: curZanCai }, { name: userIpt, id: null }, true);
      return;
    }
    if (props.router === 'spaceHome') {
      submitSpaceHome();
    } else if (props.router === 'spaceData' && curSelect === 'all') {
      submitSpaceHome();
    } else if (props.router === 'spaceData' && curSelect !== 'all') {
      submitSpaceData();
    }
  };

  //回车触发提交
  const handleKeyDown = (e: any) => {
    if (e.keyCode === 13) {
      userIptSubmit();
    }
  };

  //命中结果点击
  const hitClickCb = (type: any, query: any, name: any) => {
    props.hitClickCb({
      query: query,
      cognition_type: type,
      name: name,
    });
  };

  //切换到操作形态
  const toggleHandleMode = () => {
    updateState({
      curMode: 'handle', //当前模式为处理
    });
  };
  //获取点踩的反馈列表
  const getFeedbackReasons = async () => {
    let res = await feedback_reasons({});
    if (res.code === 0) {
      setFeedbackReasons(res.data);
    } else {
      message.error(res.msg);
    }
  };
  useEffect(() => {
    getFeedbackReasons(); //获取点踩的反馈列表
  }, []);
  //取消输入框的赞踩模式
  const cancleZanCai = () => {
    setCurInputMode('input');
    setUserIpt('');
    setIptPlaceholder('输入关键字，即可快速查询资料');
  };

  //查看相关推荐
  const lookRecommend = async (data: any) => {
    let robotLoad = {
      type: 'queryLoad',
      data: null,
    };
    setAiChatList((prev) => [...prev, robotLoad]);
    scrollToBottom();
    //将aiLogs里获取type=miniModelArticle 的data组合成一组
    const filteredDataArray = aiChatList
      .filter((item: any) => item.type === 'miniModelArticle')
      .map((item: any) => item.data)
      .flat();
    //匹配出当前相关推荐已显示的id 用于后台去重
    const ids = filteredDataArray
      .filter((item: any) => item.keyword === data.data.keyword)
      .map((item: any) => item.sentence_id);
    let query = data?.data.keyword;
    let res = await articleRecommend({ query, ids });
    if (res.code === 0) {
      //删除queryLoad
      setAiChatList((prev) => prev.filter((log) => log.type !== 'queryLoad'));

      //如果有数据
      if (res.data.articles && res.data.articles.length > 0) {
        const articlesWithKeyword = res.data.articles.map((article: any) => ({
          ...article,
          query: query, //相关推荐的query为数组第一个的main_body
          keyword: data?.data.keyword,
        }));
        let miniModelArticle = {
          key: nanoid(),
          type: 'miniModelArticle',
          isTypewriter: true,
          data: articlesWithKeyword,
        };
        setAiChatList((prev: any) => [...prev, miniModelArticle]);
        //小于5条表示后面没有数据了
        if (res.data.articles.length <= 4) {
          setTimeout(() => {
            let systemCopy2 = {
              key: nanoid(),
              type: 'systemCopy',
              data: `<div class="modeListBox"><div class="modeList marR90">非常抱歉，没有更多结果可供显示，请尝试使用其他关键词。</div></div>`,
            };
            setAiChatList((prev) => [...prev, systemCopy2]);
            scrollToBottom();
          }, 500 + 800 * res?.data?.articles.length);
        } else {
          setTimeout(() => {
            let lookRecommend = {
              key: nanoid(),
              type: 'lookRecommend',
              data: data.data,
            };
            setAiChatList((prev) => [...prev, lookRecommend]);
            scrollToBottom();
          }, 500 + 800 * res?.data?.articles.length);
        }
      } else {
        setTimeout(() => {
          let systemCopy2 = {
            key: nanoid(),
            type: 'systemCopy',
            data: `<div class="modeListBox"><div class="modeList marR90"><span style="">非常抱歉，没有更多结果可供显示，请尝试使用其他关键词。</div></div>`,
          };
          setAiChatList((prev) => [...prev, systemCopy2]);
          scrollToBottom();
        }, 500 + 800 * res?.data?.articles.length);
      }
    } else {
      //删除queryLoad
      setAiChatList((prev) => prev.filter((log) => log.type !== 'queryLoad'));
      message.error(res.msg);
    }
  };

  //踩的反馈提交 点击反馈列表 or 输入框的提交按钮
  const submitFeedbackCai = async (item: any, item2: any, isIpt = false) => {
    let body: any = {
      query_string: item?.data?.query_string,
      query_result: item?.data?.query_result,
      source: '小模型',
      type: item?.data?.type,
    };
    //反馈理由是输入的话 参数用other_reason，reason_ids = []
    if (isIpt) {
      body.reason_ids = [];
      body.other_reason = item2.name;
    } else {
      body.reason_ids = [item2.id];
    }
    let res = await search_feedback(body);
    if (res.code === 0) {
      let caiTxt = '收到您的反馈，我会总结经验，努力改进的。';
      let zancaiTip = {
        key: nanoid(),
        type: 'spaceZanCai',
        data: {
          type: item?.data?.type,
          reason: item2.name || '这个结果不符合预期，需要改进!',
          target_content: item?.data?.sentence,
          range: null,
        },
      };

      setTimeout(() => {
        setAiChatList((prev: any) => [...prev, zancaiTip]);
        updateState({
          robotLoading: false,
        });
        scrollToBottom();
        cancleZanCai(); //取消赞踩模式 恢复聊天输入模式
      }, 500);

      //显示系统回复的文案
      setTimeout(() => {
        let systemTxtRecover = {
          key: nanoid(),
          type: 'spaceBotSystemRecover',
          data: caiTxt,
        };
        setAiChatList((prev: any) => [...prev, systemTxtRecover]);
        scrollToBottom();
      }, 1500);
    } else {
      message.error(res.msg);
    }
  };

  return (
    <div className="InputModeWrap">
      <div
        className={`InputModeMain ${curInputMode === 'zancai' ? 'miniHei' : ''}`}
        ref={InputModeMainRef}
      >
        {aiChatList &&
          aiChatList.length > 0 &&
          aiChatList.map((item: any) => {
            if (item.type === 'systemCopy') {
              //系统文案
              return (
                <div
                  key={item.key || nanoid()}
                  dangerouslySetInnerHTML={{ __html: item.data }}
                ></div>
              );
            } else if (item.type === 'spaceBotSystemRecover') {
              //系统文案2
              return (
                <div className="spaceBotSystemRecover" key={nanoid()}>
                  <div className="recoverContent">{item.data}</div>
                </div>
              );
            } else if (item.type === 'spaceZanCai') {
              return (
                //赞踩
                <div className="spaceZanCaiBox" key={item.key || nanoid()}>
                  <div className="zanCaiUserCommandBox">
                    <div className="zanCaiUserCommand">{item.data.reason}</div>
                  </div>
                  <div className="spaceCommandZanCaiBox">
                    <div className="spaceCommandZanCai-hd">
                      {item.data.type === 1 ? (
                        <LikeFilled style={{ color: '#60D9A4' }} />
                      ) : (
                        <DislikeFilled style={{ color: '#F57070' }} />
                      )}
                    </div>
                    <div className="spaceCommandZanCai-bd">
                      <span>{item.data.target_content}</span>
                    </div>
                  </div>
                </div>
              );
            } else if (item.type === 'userCommand') {
              //用户输入的命令
              return (
                <div
                  key={item.key || nanoid()}
                  dangerouslySetInnerHTML={{ __html: item.data }}
                ></div>
              );
            } else if (item.type === 'trainingBtn') {
              //训练按钮
              return (
                <div className="modeListBox" key={item.key || nanoid()}>
                  <div className="modeList">{item.data}</div>
                  <div className="modeTrainBox">
                    <Button type="primary" size="large" onClick={toggleHandleMode}>
                      去训练
                    </Button>
                  </div>
                </div>
              );
            } else if (item.type === 'queryLoad') {
              //机器人load
              return (
                <div className="modeListBox" key={item.key || nanoid()}>
                  <div className="modeList">小麦正在查询...</div>
                </div>
              );
            } else if (item.type === 'hitResults') {
              //查询命中 --入口的命中
              if (item.data.is_hit) {
                return (
                  <div className="modeListBox" key={item.key || nanoid()}>
                    <div className="autoWidth modeList">
                      <div style={{ margin: '0 0 15px 0' }}>
                        小麦找到关于“{item.data.query}”的内容 {item.data?.total_count} 篇
                      </div>
                      {item.data?.count?.fact > 0 && (
                        <div className="targetResultBox">
                          <span className="targetResult-hd">行政局知识空间</span>
                          <span
                            className="targetResult-bd"
                            onClick={() => {
                              hitClickCb('fact', item.data?.query, '行政局知识空间');
                            }}
                          >
                            {item.data?.count?.fact} 篇相关搜索
                          </span>
                        </div>
                      )}
                      {item.data?.count?.speech > 0 && (
                        <div className="targetResultBox">
                          <span className="targetResult-hd">重要讲话空间</span>
                          <span
                            className="targetResult-bd"
                            onClick={() => {
                              hitClickCb('speech', item.data?.query, '重要讲话空间');
                            }}
                          >
                            {item.data?.count?.speech} 篇相关搜索
                          </span>
                        </div>
                      )}
                      {item.data?.count?.format > 0 && (
                        <div className="targetResultBox">
                          <span className="targetResult-hd">公文模板空间</span>
                          <span
                            className="targetResult-bd"
                            onClick={() => {
                              hitClickCb('format', item.data?.query, '公文模板空间');
                            }}
                          >
                            {item.data?.count?.format} 篇相关搜索
                          </span>
                        </div>
                      )}
                      {item.data?.count?.good_article > 0 && (
                        <div className="targetResultBox">
                          <span className="targetResult-hd">好文收藏空间</span>
                          <span
                            className="targetResult-bd"
                            onClick={() => {
                              hitClickCb('good_article', item.data?.query, '好文收藏空间');
                            }}
                          >
                            {item.data?.count?.good_article} 篇相关搜索
                          </span>
                        </div>
                      )}
                      {item.data?.count?.good_sentence > 0 && (
                        <div className="targetResultBox">
                          <span className="targetResult-hd">好词好句空间</span>
                          <span
                            className="targetResult-bd"
                            onClick={() => {
                              hitClickCb('good_sentence', item.data?.query, '好词好句空间');
                            }}
                          >
                            {item.data?.count?.good_sentence} 篇相关搜索
                          </span>
                        </div>
                      )}
                      {item.data?.count?.collection > 0 && (
                        <div className="targetResultBox">
                          <span className="targetResult-hd">定期收集空间</span>
                          <span
                            className="targetResult-bd"
                            onClick={() => {
                              hitClickCb('collection', item.data?.query, '定期收集空间');
                            }}
                          >
                            {item.data?.count?.collection} 篇相关搜索
                          </span>
                        </div>
                      )}
                    </div>
                  </div>
                );
              } else {
                //聊天时 命中知识库
                if (item?.data?.cognitions && item?.data?.cognitions.length > 0) {
                  return (
                    <ArticleSource
                      key={item.key || nanoid()}
                      data={item?.data?.cognitions}
                      scrollToBottom={scrollToBottom}
                    ></ArticleSource>
                  );
                } else {
                  return (
                    <div key={item.key || nanoid()}>
                      {item.data.content &&
                        item.data.content.map((item2: any) => {
                          return (
                            <div className="modeListBox autoWidth" key={nanoid()}>
                              <div
                                className=" modeList"
                                dangerouslySetInnerHTML={{ __html: replaceN(item2) }}
                              ></div>
                            </div>
                          );
                        })}
                    </div>
                  );
                }

                //大脑空间tab页 - cognitions=0代表没命中 >0是命中
                // return (
                //   <div key={nanoid()}>
                //     {item.data.content &&
                //       item.data.content.map((item2: any) => {
                //         return (
                //           <div className="modeListBox autoWidth" key={nanoid()}>
                //             <div
                //               className=" modeList"
                //               dangerouslySetInnerHTML={{ __html: replaceN(item2) }}
                //             ></div>
                //           </div>
                //         );
                //       })}
                //   </div>
                // );
              }
            } else if (item.type === 'miniModelArticle') {
              //小模型
              return (
                <MiniModelArticle
                  key={item.key}
                  setIptPlaceholder={setIptPlaceholder}
                  setAiChatList={setAiChatList}
                  setCurInputMode={setCurInputMode}
                  setCurZanCai={setCurZanCai}
                  updateState={updateState}
                  data={item.data}
                  scrollToBottom={scrollToBottom}
                ></MiniModelArticle>
              );
            } else if (item.type === 'feedbackReasons') {
              // 是否查看更多结果
              return (
                <div className="feedbackReasonsWrap" key={item.key}>
                  <div className="feedbackReasonsBox">
                    <div className="feedbackReasonsTitle">
                      很抱歉，小麦的的回答没有让您满意，请说明原因：
                    </div>
                    <div className="feedbackReasonsListBox">
                      {feedbackReasons &&
                        feedbackReasons.length > 0 &&
                        feedbackReasons.map((item2: any) => {
                          return (
                            <div
                              key={item2.id}
                              className="feedbackReasonsList"
                              onClick={() => submitFeedbackCai(item, item2)}
                            >
                              {item2.name}
                            </div>
                          );
                        })}
                    </div>
                    <div className="feedbackReasonsFoot">
                      如有其他问题描述及建议请在下方输入框输入
                    </div>
                  </div>
                </div>
              );
            } else if (item.type === 'lookRecommend') {
              // 是否查看更多结果
              return (
                <div className="recommendBox" key={item.key}>
                  <span className="recommend-hd">是否查看更多结果</span>
                  <span className="recommend-bd">
                    <Button
                      type="primary"
                      onClick={() => {
                        lookRecommend(item);
                      }}
                    >
                      好的
                    </Button>
                  </span>
                </div>
              );
            }
            return <div key={nanoid()}></div>;
          })}
      </div>
      <div className="InputModeBottomWrap">
        <div className="InputModeBottom">
          {showBottomSelect && (
            <div className="InputModeSelectBox">
              {curInputMode === 'zancai' ? (
                curZanCai.type === 1 ? (
                  <div className="commandTypeTag cyan">点赞</div>
                ) : curZanCai.type === 2 ? (
                  <div className="commandTypeTag red">点踩</div>
                ) : (
                  <></>
                )
              ) : (
                // <Select
                //   bordered={false}
                //   size="small"
                //   value={curSelect}
                //   style={{ width: 130 }}
                //   onChange={changeSelect}
                //   options={selectList}
                // ></Select>
                curTab !== 'department' && (
                  <Select
                    bordered={false}
                    size="small"
                    value={curSelect}
                    style={{ width: 130 }}
                    onChange={changeSelect}
                    options={selectList}
                  ></Select>
                )
              )}
            </div>
          )}

          <div className="InputModeInputBox">
            <Input
              value={userIpt}
              bordered={false}
              placeholder={iptPlaceholder}
              onChange={(e) => setUserIpt(e.target.value)}
              onKeyDown={handleKeyDown}
              autoComplete="off"
            />
          </div>
          <div className="InputModeBtnBox" onClick={userIptSubmit}>
            <img src={conversion_send_icon} width={30} height={30} />
          </div>
        </div>
        {curInputMode === 'zancai' && (
          <div className="InputZancaiBox">
            <div className="InputZancai-hd">
              <span>{curZanCai?.sentence}</span>
            </div>
            <div className="InputZancai-bd" onClick={cancleZanCai}>
              <CloseCircleOutlined />
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

// export default InputMode;
export default connect(({ spaceBot, spaceModel }) => ({ spaceBot, spaceModel }))(InputMode);
